<template>
  <div>
    <vue-codemirror v-model="sqlCode" :options="editorOptions"></vue-codemirror>
    <el-button type="primary" @click=formatSQL>格式化</el-button>
    <el-button type="primary" @click=clear>清空</el-button>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';

import VueCodemirror from 'vue-codemirror/codemirror';
import sqlFormatter from 'sql-formatter';

export default {
  components: {
    VueCodemirror,
  },
  data() {
    return {
      sqlCode: '',
      formattSqlCode: '',
      editorOptions: {
        // CodeMirror 配置选项
        // mode: "text/x-sql", // 设置编辑器的语言模式为 SQL
        mode: "text/x-mysql", // 设置编辑器的语言模式为 SQL
        theme: "dracula", // 设置编辑器的主题，可以选择其他主题如 "material"、"dracula" 等
        lineNumbers: true, // 显示行号
        tabSize: 2, // 设置制表符的宽度为 2 个空格
        indentWithTabs: false, // 使用空格而不是制表符进行缩进
        autofocus: true, // 自动聚焦到编辑器
        matchBrackets: true, // 高亮匹配的括号
        autoCloseBrackets: true, // 自动闭合括号
        extraKeys: {
          "Ctrl-Space": "autocomplete", // 开启自动完成功能
          // "Ctrl-Enter": runQuery, // 自定义快捷键，例如运行查询函数
        },

      },
    };
  },
  methods: {
    formatSQL() {
      this.formattSqlCode = sqlFormatter.format(this.sqlCode);
      this.sqlCode = this.formattSqlCode;
    },
    clear(){
      this.sqlCode = ''
    }
  }
};
</script>